

<!-- 卡片详情 -->
<template>
	<view class="container">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="卡片详情" colorTheme="black">
			</navHeader>
		</view>
		
		
		<!-- 卡片详情 -->
		<view class="cardDetail-Container">
			<image class="cardCover" :class="{expireDate: cardDetail.isUse == 30}" :src="imgSite + cardDetail.cardImg"></image>
			<view class="cardItem">
				<image class="isUseIcon" :src="icon['isUse'+cardDetail.isUse]"></image>
				<view class="verifyCode-Container borderOneRpx">
					<view class="verifyCode-Content">
						<view class="codeLabel" :class="{isUse10: cardDetail.isUse == 10}">
							核销码
						</view>
						<view class="codeValue" :class="{isUse10: cardDetail.isUse == 10}">
							{{cardDetail.exchangeCode}}
						</view>
					</view>
				</view>
				
				<view class="oneRow borderOneRpx">
					<view class="columnLabel">
						使用期限
					</view>
					<view class="columnValue">
						{{cardDetail.startDt | formatDate}}-{{cardDetail.endDt | formatDate}}
					</view>
				</view>
				
				<view v-if="cardDetail.isUse == 20" class="oneRow borderOneRpx">
					<view class="columnLabel">
						核销时间
					</view>
					<view class="columnValue">
						{{cardDetail.exchangeDt | formatDateTime}}
					</view>
				</view>
				
				<view class="oneRow">
					<view class="columnLabel">
						详情介绍
					</view>
				</view>
				<view class="cardDescribe">
					<rich-text v-if="cardDetail.cardDescribe" :nodes="cardDetail.cardDescribe"></rich-text>
					<text v-else>无</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		filters: {
			formatDate: function(date) {
				
				var date = new Date(date);
				var YY = date.getFullYear() + '.';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '.';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());

				return YY + MM + DD;
			},
			formatDateTime: function(date) {
				
				var date = new Date(date);
				var YY = date.getFullYear() + '.';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '.';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				

				return YY + MM + DD + " " + hh + mm + ss;
			},
		},
		components: {
			navHeader
		},
		data() {
			return {
				icon: {
					isUse10: "/static/images/user/cardPack/isUse10.png",
					isUse20: "/static/images/user/cardPack/isUse20.png",
					isUse30: "/static/images/user/cardPack/isUse30.png"
				},
				
				//卡包详情
				customerCardId: "",
				cardDetail: {}
			}
		},
		computed:{
			...mapState(['hasLogin', 'imgSite']),
		},
		onLoad(options) {
			this.customerCardId = options.customerCardId;
			this.getCardDetail_fun();
		},
		methods:{
			
			//卡包详情
			getCardDetail_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/CardApi/findCardByCustomerCardIdForApi',
					method: 'POST',
					data: {
						customerCardId: that.customerCardId
					},
					success: function(res) {
						that.cardDetail = res.data.response || {};
						if(that.cardDetail.cardDescribe) {
							that.cardDetail.cardDescribe = that.$api.globalUtil.formatRichText(that.cardDetail.cardDescribe);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	
	//卡包详情
	.borderOneRpx:after {
		border-top: 0;
		border-left: 0;
		border-right: 0;
		border-color: #EDEDED;
	}
	.cardDetail-Container {
		padding-top: 20rpx;
		
		.cardCover {
			display: block;
			margin: 0 auto;
			width: 690rpx;
			height: 370rpx;
			border-radius:16rpx;
			
			&.expireDate {
				opacity:0.4;
			}
		}
		
		.cardItem {
			position: relative;
			margin: 0 auto;
			margin-bottom: 30rpx;
			width:690rpx;
			// height:458rpx;
			background:rgba(255,255,255,1);
			border-radius:16rpx;
			overflow: hidden;
			
			.isUseIcon {
				z-index: 999;
				position: absolute;
				top: 20rpx;
				right: 16rpx;
				width: 90rpx;
				height: 90rpx;
			}
			
			.verifyCode-Container {
				position: relative;
				padding-top: 40rpx;
				width: 100%;
				height: 186rpx;

				.verifyCode-Content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 auto;
					padding: 0 90rpx 0 30rpx;
					width: 630rpx;
					height: 100rpx;
					background:rgba(245,245,245,1);
					border-radius:5rpx;
				
					.codeLabel {
						line-height: 100rpx;
						font-size:34rpx;
						font-family:PingFang SC;
						color:rgba(153,153,153,1);
						
						&.isUse10{
							color: #666666;
						}
					}
					
					.codeValue {
						line-height: 100rpx;
						font-size:34rpx;
						font-family:PingFang SC;
						color:rgba(153,153,153,1);
						
						&.isUse10{
							color: #333333;
						}
					}
				}
			}
		}
		
		
		//一行样式
		.oneRow {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			width: 100%;
			height: 104rpx;
			
			.columnLabel {
				font-size:26rpx;
				font-family:PingFang SC;
				color: #666666;
			}
			.columnValue {
				font-size:26rpx;
				font-family:PingFang SC;
				color: #333333;
			}
		}
	}
	
	.cardDescribe {
		margin-top: -44rpx;
		padding: 30rpx;
	}
</style>



